<template>
  <div :class="['recommend', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="left">
      <div class="title clearfix">
        <div class="chinese">精品推荐</div>
      </div>
      <div class="menu">
        <ul class="top">
          <li
            @click="chooseType(item, index)"
            :class="['content', active == index ? 'active' : '']"
            v-for="(item, index) in menuTop"
            :key="item.data_id"
          >
            {{ item.name }}
          </li>
        </ul>
        <!-- <ul class="bottom clearfix">
          <li class="content" v-for="item in menuBottom" :key="item">{{ item }}</li>
        </ul> -->
      </div>
      <div class="see-more">
        <div class="line"></div>
        <div @click="goWorks" class="text">
          查看更多<img src="@/static/img/home/arrow.png" alt="" />
        </div>
      </div>
      <div class="bottom-img" @click="goDesc(artWork[1]?.data_id, artWork[1]?.work_type)">
        <el-image v-if="artWork[1]?.thumbnail" :src="artWork[1]?.thumbnail" fit="cover" />
      </div>
    </div>
    <div class="right" @click="goDesc(artWork[0]?.data_id, artWork[0]?.work_type)">
      <el-image fit="cover" v-if="artWork[0]?.thumbnail" :src="artWork[0]?.thumbnail" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuTop: [],
      menuBottom: ["舞蹈作品", "戏剧作品", "工艺美术", "非遗传承"],
      active: 0,
      artWork: []
    };
  },
  mounted() {
    // console.log(this.$api);
    this.getProductType();
  },
  methods: {
    goDesc(data_id, type) {
      if (type == 1) {
        this.$router.push({ path: '/artwork/desc', query: { data_id, workType: this.workType } })
      } else if (type == 2) {
        this.$router.push({ path: '/onlineVideo/desc', query: { data_id, type } })
      }
    },
    goWorks() {
      this.$router.push("/artwork");
    },
    async getProductType() {
      const res = await this.$api.getProductType({});
      if (res.status == "$SUCCESS") {
        if (Array.isArray(res.result.item_list)) {
          this.menuTop = res.result.item_list.filter(
            (item) => item.parent_id == -1
          );
          this.chooseType(this.menuTop[0].data_id, 0)
        }
        console.log(this.menuTop);
      }
    },
    chooseType(item, index) {
      this.active = index;
      console.log('item+++', item);
      this.artWorkList(item);
    },
    artWorkList(series) {
      const params = {
        recommend: 1,
        type: series,
      };
      console.log('params', params)
      this.$api.artWorkList({ ...params }).then((res) => {
        // this.artWork
        if (Array.isArray(res.result.item_list)) {
          this.$set(this, 'artWork', res.result?.item_list?.filter(item => {
            return item.thumbnail
          }))
        } else {
          this.$set(this, 'artWork', [])
        }
        console.log('this.artWork', this.artWork)
      });
    },
  },
};
</script>

<style lang="less" scoped>
.recommend {
  &.z-web {
    position: relative;

    .left {
      width: 1644px;
      height: 1326px;
      background-color: #f4f2e6;
      padding: 185px 0 0 150px;

      .title {
        display: block;
      }

      .menu {
        max-width: 300px;
        min-width: 330px;
        // vertical-align: top;
        position: absolute;
        top: 185px;
        // display: inline-block;
        margin-left: 125px;

        .top {
          display: flex;
          flex-wrap: wrap;
        }

        .content {
          font-size: 24px;
          font-family: SourceHanSerifSC;
          font-weight: 600;
          color: #000;
          line-height: 72px;
          flex-grow: 1;
          opacity: 0.5;
          writing-mode: vertical-lr;
          // float: left;
          margin-bottom: 60px;
          cursor: pointer;

          &.active {
            opacity: 1;
          }
        }

        // .top {
        //   margin-bottom: 60px;
        // }
      }

      .see-more {
        margin-top: 316px;
        margin-bottom: 60px;
      }

      .bottom-img {
        ::v-deep(.el-image) {
          width: 1000px;
          height: 400px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .right {
      max-width: 968px;
      height: 700px;
      background-color: rgba(0, 0, 0, 0);
      position: absolute;
      right: 0;
      top: 128px;
      cursor: pointer;

      ::v-deep(.el-image) {
        width: 1086px;
        height: 400px;
        // max-height: 100%;
        float: right;

        img {
            width: 100%;
            height: 100%;
          }
      }
    }
  }

  &.z-phone {
    background: #F4F2E6;
    position: relative;
    padding-top: pxtorem(60);
    height: pxtorem(1025);

    .left {
      .title {
        margin-left: pxtorem(25);

        .chinese {
          font-size: pxtorem(44);
          letter-spacing: pxtorem(7);
        }
      }

      .menu {
        width: pxtorem(330);
        // margin-top: pxtorem(300);
        position: absolute;
        right: pxtorem(60);
        top: pxtorem(608);

        .content {
          writing-mode: vertical-lr;
          margin-right: pxtorem(50);
          display: inline-block;
          margin-bottom: pxtorem(60);

          &:nth-child(4n) {
            margin-right: 0;
          }
        }
      }

      .see-more {
        width: auto;
        position: absolute;
        right: pxtorem(192);
        bottom: pxtorem(60);

        .text {
          margin-top: pxtorem(20);

          img {
            width: pxtorem(40);
            margin-left: pxtorem(20);
            margin-top: pxtorem(10);
          }
        }
      }

      .bottom-img {
        ::v-deep(.el-image) {
          width: pxtorem(320);
          margin-top: pxtorem(300);
        }
      }
    }

    .right {
      width: pxtorem(600);
      height: pxtorem(450);
      position: absolute;
      right: 0;
      top: pxtorem(100);

      ::v-deep(.el-image) {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
